<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transtion使用方法</title>
</head>
<style>
  div {
    width: 100px;
    height: 100px;
    background: pink;
    transition: width 2s ease-out, height 5s ease-out 2s;  /* 第四个参数是延时开始 */
  }

  div:hover {
    width: 300px;
    height: 300px;
  }
</style>
<body>
  <p>transition 属性是一个简写属性，用于设置四个过渡属性：</p>
  <p>transition-property: 规定设置过渡效果的 CSS 属性的名称。</p>
  <p>transition-duration: 规定完成过渡效果需要多少秒或毫秒。</p>
  <p>transition-timing-function: 规定速度效果的速度曲线。ease-in 规定以慢速开始的过渡效果 ease-out 规定以慢速结束的过渡效果</p>
  <p>transition-delay: 定义过渡效果何时开始。</p>
  <div>

  </div>
</body>
</html>